---
title: <Puck.Fields>
---

import { PuckPreview } from "@/docs/components/Preview";
import { Puck } from "@/puck";

# \<Puck.Fields\>

Render the fields for the currently selected item in [`<Puck.Preview>`](/docs/api-reference/components/puck-preview) when composing a custom Puck UI.

<PuckPreview
  config={{
    components: {
      HeadingBlock: {},
    },
  }}
  data={{ root: { props: {} }, content: [] }}
  style={{ padding: 4 }}
>
  <Puck.Fields />
</PuckPreview>

```tsx {14} showLineNumbers copy
import { Puck } from "@measured/puck";

export function Editor() {
  return (
    <Puck>
      <Puck.Fields />
    </Puck>
  );
}
```

## Props

| Param                       | Example             | Type    | Status |
| --------------------------- | ------------------- | ------- | ------ |
| [`wrapFields`](#wrapfields) | `wrapFields: false` | boolean | -      |

## Optional props

### `wrapFields`

Whether or not the top-level fields should be padded and separated by a a border. Defaults to `true`.

```tsx {6} copy
import { Puck } from "@measured/puck";

export function Editor() {
  return (
    <Puck>
      <Puck.Fields wrapFields={false} />
    </Puck>
  );
}
```
